<template>
  <guat-page-layout :title>
    <template #actions>
      <guat-button-group :buttons />
    </template>
    <div class="flex flex-col gap-4">
      <a-card title="基本信息" :bordered="false">
        <guat-base-info-desc v-if="scenario == 'check'" :column="1" size="large" />
        <guat-base-info-form v-else layout="vertical" />
      </a-card>
      <a-card title="活动封面" :bordered="false">
        <a-upload
          list-type="picture-card"
          image-preview
          :default-file-list="fileList"
          :disabled="scenario == 'check'"
        />
      </a-card>
    </div>
  </guat-page-layout>
</template>

<script setup lang="ts">
import { createActivityFormItemConfig } from "../form-config";
import { ButtonInternalStyle as BIS } from "@/config/internal-style";

type Scenario = "create" | "check" | "edit";

const router = useRouter();
const scenario = computed<Scenario>(() => {
  const isAdd = !router.currentRoute.value.params.id;
  const paths = router.currentRoute.value.path.split("/");
  if (isAdd) return paths[paths.length - 1] as Scenario;
  else return paths[paths.length - 2] as Scenario;
});
const title = computed(() => {
  switch (unref(scenario)) {
    case "check":
      return "查看活动详情";
    case "create":
      return "创建活动";
    case "edit":
      return "编辑活动";
  }
});

const buttons = computed(() => {
  switch (unref(scenario)) {
    case "check":
      return [{ text: "返回", internal: BIS.PLO, onClick: router.back }];
    case "edit":
    case "create":
      return [
        { text: "返回", internal: BIS.PLO, onClick: router.back },
        { text: "暂存", internal: BIS.OLR },
        { text: `${unref(scenario) == "create" ? "创建" : "保存"}活动`, internal: BIS.PLR },
      ];
  }
});
const [GuatBaseInfoForm, { setFormValue }] = useForm(createActivityFormItemConfig);
const [GuatBaseInfoDesc] = useDescriptions(
  [
    { label: "活动名称", path: "activityName" },
    { label: "活动类型", path: "activityType" },
    { label: "报名时间", path: "baoming" },
    { label: "活动时间", path: "huodong" },
    { label: "人数限制", path: "peopleLimit" },
    {
      label: "允许请假",
      path: "qingjia",
      component: "Tag",
      componentProps: {
        color: "green",
      },
    },
    { label: "报名内容", path: "content" },
  ],
  {
    activityName: "第十五届蓝桥杯算法大赛（广西赛区）",
    activityType: ["竞赛", "算法"],
    baoming: ["2024-03-18 00:00:00", "2024-03-22 23:59:59"],
    huodong: ["2024-03-18 00:00:00", "2024-03-22 23:59:59"],
    peopleLimit: 128,
    qingjia: "允许",
    content: "第十五届蓝桥杯算法大赛省赛报名",
  }
);

const fileList = [
  {
    uid: "-2",
    name: "20200717-103937.png",
    url: "//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
  },
];

onMounted(() => {
  setFormValue({
    activityName: "第十五届蓝桥杯算法大赛（广西赛区）",
    activityType: ["竞赛", "算法"],
    baoming: ["2024-03-18 00:00:00", "2024-03-22 23:59:59"],
    huodong: ["2024-03-18 00:00:00", "2024-03-22 23:59:59"],
    peopleLimit: 128,
    qingjia: true,
    content: "第十五届蓝桥杯算法大赛省赛报名",
  });
});
</script>

<style scoped></style>
